<template>
    <div class="tree">
        <div class="searchBox">
            <el-input class="seatchItem" v-model="searchInput" clearable placeholder="搜索关键字"
                @keyup.native.enter="change" @clear="clear" @input="input">
                <el-dropdown slot="prepend" placement="bottom" @command="SelectCommand" trigger="click">
                    <span class="selectText" :style="{'color' : selectColor}">{{seatchType}}</span>
                    <el-dropdown-menu slot="dropdown" :class="theme">
                        <el-dropdown-item class="search-item all" command="all">ALL
                        </el-dropdown-item>
                        <el-dropdown-item class="search-item GET" command="get">GET
                        </el-dropdown-item>
                        <el-dropdown-item class="search-item POST" command="post">PSOT
                        </el-dropdown-item>
                        <el-dropdown-item class="search-item PUT" command="put">PUT
                        </el-dropdown-item>
                        <el-dropdown-item class="search-item DEL" command="delete">DEL
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-input>
        </div>
        <div class="treeLayout">
            <list></list>
            <searchList v-if="showSearch"></searchList>
            <!-- <div class="tree-buttons">
                <el-button type="primary" icon="el-icon-setting" circle></el-button>
            </div> -->
            <div class="moveMark" :style="{'left' : markSetting.x + 'px', 'top' : markSetting.y + 'px',}">
                <div class="icon" v-if="apiMoveType != 'moveIntoFolder' && apiMoveType != 'intoFolder'">&nbsp;</div>
                <div class="icon-folder" v-if="apiMoveType == 'moveIntoFolder' ||  apiMoveType == 'intoFolder'">
                    <i class="el-icon-folder-add"></i>
                </div>
                <div class="title">{{markSetting.title}}</div>
            </div>
        </div>
        <el-drawer ref="FolderDetail" title="文件夹详情" direction="ltr" size="400px" :before-close="handleClose"
            :visible.sync="showFolderDetail" :with-header="false">
            <folderDetail v-if="foldervalue" :folderValue="foldervalue"></folderDetail>
        </el-drawer>

        <el-dialog title="新建子文件夹" :class="theme" :visible.sync="newFolder.show" width="50%"
            :before-close="newFolderClose">
            <el-form :model="newFolder" :rules="newFolder.rules" ref="ruleForm">
                <el-form-item prop="title">
                    <el-input class="textStyle" v-model="newFolder.title" placeholder="文件夹名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input class="textStyle" type="textarea" resize="none" maxlength="1000" show-word-limit
                        placeholder="文件夹备注" v-model="newFolder.description" :autosize="{ minRows: 10, maxRows: 10}">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="samll" @click="newFolderEvent">提交</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import { mapState } from "vuex";
    import folderDetail from "./folderDetail";
    import list from './list';
    import searchList from './search';

    export default {
        components: {
            list,
            folderDetail,
            searchList
        },
        data() {
            return {
                newFolder: {
                    rules: {
                        title: [
                            { required: true, message: '请输入文件夹名称', trigger: 'blur' },
                        ],
                    },
                    show: false,
                    title: '',
                    description: '',
                },
                showFolderDetail: false,
                searchInput: '',
                seatchType: 'ALL',
                selectColor: '#999999',
                showSearch: false,
            }
        },
        computed: {
            ...mapState("Tree", {
                markSetting: state => state.markSetting,
                apiMoveType: state => state.apiMoveType,
                foldervalue: state => state.folderDetail.object,
                drawer: state => state.folderDetail.drawer,
                showNewFolder: state => state.newFolder.drawer,
                newFolderValue: state => state.newFolder.object,
            }),
            ...mapState("theme", {
                theme: state => state.theme,
            }),
        },
        watch: {
            drawer: function (newVal, oldVal) {
                if (!newVal) {
                    this.$refs.FolderDetail.closeDrawer();
                };
                this.showFolderDetail = newVal;
            },
            showNewFolder: function (newVal, oldVal) {
                if (!newVal) {
                    this.newFolder.title = '';
                    this.newFolder.description = '';
                };
                this.newFolder.show = newVal;
            },
        },
        mounted() {
            this.$store.dispatch('Tree/getRenderData', () => {
                this.$message({
                    message: '获取项目数据失败',
                    type: 'warning'
                });
            });
        },
        methods: {
            SelectCommand(str) {
                if (str == 'all') {
                    this.seatchType = 'ALL'
                    this.selectColor = '#999999'
                };
                if (str == 'get') {
                    this.seatchType = 'GET'
                    this.selectColor = '#67C23A'
                };
                if (str == 'post') {
                    this.seatchType = 'POST'
                    this.selectColor = '#E6A23C'
                };
                if (str == 'put') {
                    this.seatchType = 'PUT'
                    this.selectColor = '#409EFF'
                };
                if (str == 'delete') {
                    this.seatchType = 'DEL'
                    this.selectColor = '#F56C6C'
                };

            },
            newFolderEvent() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('是否创建文件夹？', '提示', {
                            customClass: this.theme
                        }).then(_ => {
                            this.$store.dispatch('Tree/newFolderEvent', {
                                title: this.newFolder.title,
                                description: this.newFolder.description
                            }, () => {
                                this.$message({
                                    message: '更新项目信息失败',
                                    type: 'warning'
                                });
                            });
                        }).catch(_ => { });
                    } else {
                        return false;
                    }
                });
            },
            newFolderClose(done) {
                this.$store.dispatch('Tree/closeNewFolder');
            },
            handleClose(done) {
                this.$store.dispatch('Tree/closeFolderDetail');
                done();
            },
            // closeEditeFolderDetail(data) {
            //     // this.$store.dispatch('Tree/editFolderDetail');
            // },
            change() {
                console.log(this.searchInput);
                this.showSearch = true;
            },
            clear() {
                this.showSearch = false;
                this.SelectCommand('all');
            },
            input() {
                if (!this.searchInput) {
                    this.clear();
                };
            }
        },
    }
</script>


<style scoped>
    .tree {
        position: absolute;
        top: 20px;
        bottom: 0px;
        overflow: hidden;
        width: 100%;
    }

    .searchBox {
        margin: 0 10px;
    }

    .search-item {
        font-weight: bold;
    }

    .treeLayout {
        position: absolute;
        top: 70px;
        bottom: 0px;
        left: 15px;
        right: 0px;
    }

    .selectText {
        cursor: pointer;
        font-weight: bold;
    }

    .tree-buttons {
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
    }
</style>